<template>
  <div class="map">
    <div class="map-canvas">
      <div class="map-main" v-html="mapMainHtml"></div>
    </div>
    <div class="map-list">
      <div class="cell" v-for="item in mapsBaseData" :key="item.key" @click="handleClickMapCell(item)">
        <div class="map-avatar" :style="{backgroundImage:`url(${mapUrlBase}/avatar/${item.avatar})`}"></div>
        <div class="map-tt">{{item.title}}</div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'

  export default {
    name: 'index',
    data() {
      return {
        pic: null,
        mapUrlBase: '/maps/word-1',
        mapsBaseData: [
          {
            key: 'map3',
            avatar: '03.png',
            title: '世界陆地自然带分布',
            maps: [
              'z-2',
              [
                {
                  id: 7,
                  key: 'map3_7',
                  value: 'map3_7',
                  text: '洼地',
                  icon: 'map3-c-7.png'
                },
                {
                  id: 6,
                  key: 'map3_6',
                  value: 'map3_6',
                  text: '0 ~ 200 米',
                  icon: 'map3-c-6.png'
                },
                {
                  id: 5,
                  key: 'map3_5',
                  value: 'map3_5',
                  text: '200 ~ 500 米',
                  icon: 'map3-c-5.png'
                },
                {
                  id: 4,
                  key: 'map3_4',
                  value: 'map3_4',
                  text: '500 ~ 2000 米',
                  icon: 'map3-c-4.png'
                },
                {
                  id: 3,
                  key: 'map3_3',
                  value: 'map3_3',
                  text: '2000 ~ 5000 米',
                  icon: 'map3-c-3.png'
                },
                {
                  id: 2,
                  key: 'map3_2',
                  value: 'map3_2',
                  text: '<span class="serif">＞</span> 5000 米',
                  icon: 'map3-c-2.png'
                },
                {
                  id: 1,
                  key: 'map3_1',
                  value: 'map3_1',
                  text: '冰盖',
                  icon: 'map3-c-1.png'
                }
              ],
              'z']
          },
          {
            key: 'map4',
            avatar: '04.png',
            title: '世界洋流分布（北半球冬季）',
            maps: [
              'z',
              [
                {
                  id: 1,
                  key: 'map4_1',
                  value: 'map4_1',
                  text: '<span class="serif">＜</span> 25 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-1.png'
                },
                {
                  id: 2,
                  key: 'map4_2',
                  value: 'map4_2',
                  text: '25 ~ 35 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-2.png'
                },
                {
                  id: 3,
                  key: 'map4_3',
                  value: 'map4_3',
                  text: '35 ~ 40 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-3.png'
                },
                {
                  id: 4,
                  key: 'map4_4',
                  value: 'map4_4',
                  text: '40 ~ 50 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-4.png'
                },
                {
                  id: 5,
                  key: 'map4_5',
                  value: 'map4_5',
                  text: '50 ~ 60 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-5.png'
                },
                {
                  id: 6,
                  key: 'map4_6',
                  value: 'map4_6',
                  text: '60 ~ 70',
                  icon: 'map4-c-6.png'
                },
                {
                  id: 7,
                  key: 'map4_7',
                  value: 'map4_7',
                  text: '70 ~ 75 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>·年)',
                  icon: 'map4-c-7.png'
                },
                {
                  id: 8,
                  key: 'map4_8',
                  value: 'map4_8',
                  text: '75 ~ 80 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-8.png'
                },
                {
                  id: 9,
                  key: 'map4_9',
                  value: 'map4_9',
                  text: '80 ~ 100 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-9.png'
                },
                {
                  id: 10,
                  key: 'map4_10',
                  value: 'map4_10',
                  text: '<span class="serif">＞</span> 100 亿焦耳/(<span class="text-unit">米<span class="sup">2</span></span>年)',
                  icon: 'map4-c-10.png'
                }
              ]
            ]
          },
          {
            key: 'map5',
            avatar: '05.png',
            title: '世界主要火山、地震带及主要山系的分布',
            maps: [
              [
                {
                  id: 10,
                  key: 'map5_10',
                  value: 'map5_10',
                  text: '<span class="serif">＜</span> 996 百帕',
                  icon: 'map5-c-10.png'
                },
                {
                  id: 9,
                  key: 'map5_9',
                  value: 'map5_9',
                  text: '996 ~ 1000 百帕',
                  icon: 'map5-c-9.png'
                },
                {
                  id: 8,
                  key: 'map5_8',
                  value: 'map5_8',
                  text: '1000 ~ 1004 百帕',
                  icon: 'map5-c-8.png'
                },
                {
                  id: 7,
                  key: 'map5_7',
                  value: 'map5_7',
                  text: '1004 ~ 1008 百帕',
                  icon: 'map5-c-7.png'
                },
                {
                  id: 6,
                  key: 'map5_6',
                  value: 'map5_6',
                  text: '1008 ~ 1016 百帕',
                  icon: 'map5-c-6.png'
                },
                {
                  id: 5,
                  key: 'map5_5',
                  value: 'map5_5',
                  text: '1016 ~ 1020 百帕',
                  icon: 'map5-c-5.png'
                },
                {
                  id: 4,
                  key: 'map5_4',
                  value: 'map5_4',
                  text: '1020 ~ 1024 百帕',
                  icon: 'map5-c-4.png'
                },
                {
                  id: 3,
                  key: 'map5_3',
                  value: 'map5_3',
                  text: '1024 ~ 1028 百帕',
                  icon: 'map5-c-3.png'
                },
                {
                  id: 2,
                  key: 'map5_2',
                  value: 'map5_2',
                  text: '1028 ~ 1036 百帕',
                  icon: 'map5-c-2.png'
                },
                {
                  id: 1,
                  key: 'map5_1',
                  value: 'map5_1',
                  text: '<span class="serif">＞</span> 1036 百帕',
                  icon: 'map5-c-1.png'
                }
              ],
              'z-2',
              [
                {
                  id: 11,
                  key: 'map5_11',
                  value: 'map5_11',
                  text: '盛行风向',
                  icon: 'map5-c-11.png'
                }
              ],
              'z-3']
          },
          {
            key: 'map6',
            avatar: '06.png',
            title: '六大板块分布示意图',
            maps: [
              'z',
              [
                {
                  id: 8,
                  key: 'map6_8',
                  value: 'map6_8',
                  text: '<span class="serif">＜</span> 996 百帕',
                  icon: 'map6-c-8.png'
                },
                {
                  id: 7,
                  key: 'map6_7',
                  value: 'map6_7',
                  text: '996 ~ 1000 百帕',
                  icon: 'map6-c-7.png'
                },
                {
                  id: 6,
                  key: 'map6_6',
                  value: 'map6_6',
                  text: '1000 ~ 1008 百帕',
                  icon: 'map6-c-6.png'
                },
                {
                  id: 5,
                  key: 'map6_5',
                  value: 'map6_5',
                  text: '1008 ~ 1012 百帕',
                  icon: 'map6-c-5.png'
                },
                {
                  id: 4,
                  key: 'map6_4',
                  value: 'map6_4',
                  text: '1012 ~ 1020 百帕',
                  icon: 'map6-c-4.png'
                },
                {
                  id: 3,
                  key: 'map6_3',
                  value: 'map6_3',
                  text: '1020 ~ 1024 百帕',
                  icon: 'map6-c-3.png'
                },
                {
                  id: 2,
                  key: 'map6_2',
                  value: 'map6_2',
                  text: '1024 ~ 1026 百帕',
                  icon: 'map6-c-2.png'
                },
                {
                  id: 1,
                  key: 'map6_1',
                  value: 'map6_1',
                  text: '<span class="serif">＞</span> 1026 百帕',
                  icon: 'map6-c-1.png'
                }
              ],
              'z-2',
              [
                {
                  id: 9,
                  key: 'map6_9',
                  value: 'map6_9',
                  text: '盛行风向',
                  icon: 'map6-c-9.png'
                }
              ],
              'z-3'
            ]
          },
          {
            key: 'map7',
            avatar: '07.png',
            title: '世界年降水量分布',
            maps: ['z', [
              {
                id: 1,
                key: 'map7_1',
                value: 'map7_1',
                text: '热带雨林气候',
                icon: 'map7-c-1.png'
              },
              {
                id: 2,
                key: 'map7_2',
                value: 'map7_2',
                text: '热带草原气候',
                icon: 'map7-c-2.png'
              },
              {
                id: 4,
                key: 'map7_4',
                value: 'map7_4',
                text: '热带沙漠气候',
                icon: 'map7-c-4.png'
              },
              {
                id: 3,
                key: 'map7_3',
                value: 'map7_3',
                text: '热带季风气候',
                icon: 'map7-c-3.png'
              },
              {
                id: 5,
                key: 'map7_5',
                value: 'map7_5',
                text: '亚热带季风和季风性湿润气候',
                icon: 'map7-c-5.png'
              },
              {
                id: 6,
                key: 'map7_6',
                value: 'map7_6',
                text: '地中海气候',
                icon: 'map7-c-6.png'
              },
              {
                id: 7,
                key: 'map7_7',
                value: 'map7_7',
                text: '温带海洋性气候',
                icon: 'map7-c-7.png'
              },
              {
                id: 9,
                key: 'map7_9',
                value: 'map7_9',
                text: '温带大陆性气候',
                icon: 'map7-c-9.png'
              },
              {
                id: 8,
                key: 'map7_8',
                value: 'map7_8',
                text: '温带季风气候',
                icon: 'map7-c-8.png'
              },
              {
                id: 11,
                key: 'map7_11',
                value: 'map7_11',
                text: '高原山地气候',
                icon: 'map7-c-11.png'
              },
              {
                id: 10,
                key: 'map7_10',
                value: 'map7_10',
                text: '寒带气候',
                icon: 'map7-c-10.png'
              }
            ], 'z-2']
          },
          {
            key: 'map8',
            avatar: '08.png',
            title: '世界7月平均气温分布',
            maps: ['z', [
              {
                id: 1,
                key: 'map8_1',
                value: 'map8_1',
                text: '<span class="serif">＜</span> -20 ℃',
                icon: 'map8-c-1.png'
              },
              {
                id: 2,
                key: 'map8_2',
                value: 'map8_2',
                text: '-20 ~ -10 ℃',
                icon: 'map8-c-2.png'
              },
              {
                id: 3,
                key: 'map8_3',
                value: 'map8_3',
                text: '-10 ~ 0 ℃',
                icon: 'map8-c-3.png'
              },
              {
                id: 4,
                key: 'map8_4',
                value: 'map8_4',
                text: '0 ~ 10 ℃',
                icon: 'map8-c-4.png'
              },
              {
                id: 5,
                key: 'map8_5',
                value: 'map8_5',
                text: '10 ~ 20 ℃',
                icon: 'map8-c-5.png'
              },
              {
                id: 6,
                key: 'map8_6',
                value: 'map8_6',
                text: '<span class="serif">＞</span> 20 ℃',
                icon: 'map8-c-6.png'
              }
            ], 'z-2']
          },
          {
            key: 'map9',
            avatar: '09.png',
            title: '世界1月平均气温分布',
            maps: ['z', [
              {
                id: 1,
                key: 'map9_1',
                value: 'map9_1',
                text: '<span class="serif">＜</span> -40 ℃',
                icon: 'map9-c-1.png'
              },
              {
                id: 2,
                key: 'map9_2',
                value: 'map9_2',
                text: '-40 ~ -30 ℃',
                icon: 'map9-c-2.png'
              },
              {
                id: 3,
                key: 'map9_3',
                value: 'map9_3',
                text: '-30 ~ -20 ℃',
                icon: 'map9-c-3.png'
              },
              {
                id: 4,
                key: 'map9_4',
                value: 'map9_4',
                text: '-20 ~ -10 ℃',
                icon: 'map9-c-4.png'
              },
              {
                id: 5,
                key: 'map9_5',
                value: 'map9_5',
                text: '-10 ~ 0 ℃',
                icon: 'map9-c-5.png'
              },
              {
                id: 6,
                key: 'map9_6',
                value: 'map9_6',
                text: '0 ~ 10 ℃',
                icon: 'map9-c-6.png'
              },
              {
                id: 7,
                key: 'map9_7',
                value: 'map9_7',
                text: '10 ~ 20 ℃',
                icon: 'map9-c-7.png'
              },
              {
                id: 8,
                key: 'map9_8',
                value: 'map9_8',
                text: '20 ~ 30 ℃',
                icon: 'map9-c-8.png'
              },
              {
                id: 9,
                key: 'map9_9',
                value: 'map9_9',
                text: '<span class="serif">＞</span> 30 ℃',
                icon: 'map9-c-9.png'
              }
            ], 'z-2']
          }
        ],
        picTotal: 0,
        mapArr: [],
        mapMainHtml: ''
      }
    },
    mounted() {
      // this.mapsBaseData.forEach(eMap => {
      //   this.disintegrateMapData(eMap)
      // })
      // console.log('ok')
    },
    methods: {
      handleClickMapCell(item) {
        this.disintegrateMapData(item)
        const htmls = []
        this.mapArr.forEach(e => {
          console.log('e', e)
          htmls.push(`<img src="${e}"/>`)
        })
        console.log('htmls', htmls)
        this.mapMainHtml = htmls.join()
      },
      disintegrateMapData(item) {
        item.maps.forEach(async e => {
          if (typeof e === 'string') {
            const tempItem = await this.loadResources(`${this.mapUrlBase}/1x/${item.key}-${e}.png`)
            this.mapArr.push(tempItem)
          }
          if (typeof e === 'object') {
            e.forEach(async e2 => {
              const tempItem = await this.loadResources(`${this.mapUrlBase}/1x/${e2.icon}`)
              this.mapArr.push(tempItem)
            })
          }
        })
      },
      loadResources(url) {
        return new Promise(resolve => {
          axios({
            method: 'get',
            url,
            responseType: 'blob'
          }).then(req => {
            setTimeout(() => {
              resolve(window.URL.createObjectURL(req.data))
            }, 0)
          })
        })
      }
    }
  }
</script>

<style scoped lang="scss">
  .map {
    position: fixed;
    width: 100%;
    height: 100%;
    display: flex;

    .map-canvas {
      flex: 1;
    }

    .map-list {
      width: 150px;
      border-left: 1px solid #000000;

      .cell {
        width: 120px;
        margin: 0 auto;
        cursor: pointer;

        .map-avatar {
          width: 120px;
          height: 90px;
          background: 50% 50% no-repeat;
          background-size: contain;
          border: 1px solid #cccccc;
        }

        .map-tt {
          font-size: 12px;
          text-align: center;
        }

        &:hover {
          .map-avatar {
            border-color: #00B7FF;
          }
        }

        & + .cell {
          margin-top: 12px;
        }
      }

    }
  }
</style>
